<template>
<view class="cartGoods">
    <view class="goodslist u-flex" v-for="(item,index) in cartList" :key="item.goods_id">
        <radio-group @click="handleGoodsChange(index)">
            <radio
                :value="item.goods_id"
                color="#eb4450"
                :checked="item.checked"
            ></radio>
        </radio-group>
        <view>
            <image class="image" :src="item.goods_small_logo"></image>
        </view>
        <view class="goods-left">
            <view>{{item.goods_name}}</view>
            <view class="goods-picet u-flex">
                <view class="goods-picet-p">￥{{item.goods_price}}</view>
                <view class="goods-num u-flex">
                    <view class="cunot" @click="handleCountUpdate(index,-1)">-</view>
                    <view class="num">{{item.count}}</view>
                    <view class="cunot" @click="handleCountUpdate(index,1)">+</view>
                </view>
            </view>
        </view>
    </view>

    <!-- 底部-->
    <view class="flooer">
        <view class="left">
            <radio-group>
                <radio @click="handleAllCheck" color="#eb4450" :checked="allChecked">   全选</radio>
            </radio-group>
        </view>
        <view class="center">合计：<text>￥ {{allPrice}}</text></view>
        <view class="right">
            <u-button type="error"  shape="circle" size="mini" @click="gopay">去结算（{{allCount}}）</u-button>
        </view>
    </view>
    
</view>
</template>

<script>
export default {
    computed:{
        cartList(){
            return this.$store.state.cartList
        },
        allChecked(){
             // 要求每种商品都被勾选 返回true
            // every方法 空数组的 返回 true 短路运算
            return (
                this.cartList.length && this.cartList.every((goods)=> goods.checked)
            )
        },
        // 数量总计
        allCount(){
            return this.$store.getters.count
        },
        // 总价计算
        allPrice(){
            return this.$store.getters.allPrice
        }
    },
    methods:{
        // 选框
        handleGoodsChange(index){
            // 拿到数组
            const cartList = this.cartList
            // 取反
            cartList[index].checked = !cartList[index].checked
            // 提交
            this.$store.commit('setCartList', cartList)
        },
        // 数量增减
        async handleCountUpdate(index, num){
            // 数组
            const cartList = this.cartList
            // 判断 数量为1再次点击删除 或是少于1
            if(cartList[index].count===1 && num===-1){
                // 弹窗确认或是删除
                const [err, result] = await uni.showModal({
                    cancelColor: '#000000',
                    cancelText: '取消',
                    confirmColor: '#3CC51F',
                    confirmText: '确认',
                    content: '你舍得删除吗',
                    showCancel: true,
                    title: '提示',
                })
                // 判断点击确认按钮就执行删除
                if(result.confirm){
                    // 确认删除
                    cartList.splice(index,1)
                    // 
                    this.$store.commit('setCartList', cartList)
                }else{
                    // 取消
                }
            }else{
                // 正常删除
                cartList[index].count += num
                // 提交
                this.$store.commit('setCartList', cartList)
            }
        },
        // 全选影响小选
        handleAllCheck(){
            // 获取当前全选状态
            const checked = !this.allChecked
            // 获取数组
            const cartList = this.cartList
            // 按商品属性
            cartList.forEach((goods)=> (goods.checked = checked))
            // 提交
            this.$store.commit('setCartList', cartList)
        },
        // 跳转支付页面
        gopay(){
            if(this.allCount >0){
                uni.navigateTo({
                    url:'/pages/pay/pay'
                })
            }else{
                uni.showToast({
                    title:'您还没有要选购的商品',
                    icon:'none'
                })
            }
        }
    }
}
</script>

<style lang="scss">
.goodslist{
    height: 209rpx;
    margin: 30rpx;
    margin-bottom: 83rpx;
    border-bottom: 1px solid #ccc;
    image{
        width: 191rpx;
        height: 191rpx;
    }
    .goods-left{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 10rpx;
    height: 100%;
    .goods-picet{
        display: flex;
        justify-content: space-between;
        .goods-picet-p{
            color: $themeColor;
        }
        .goods-num{
        .cunot{
            width: 50rpx;
            height: 50rpx;
            border: 1px solid #ccc;
            border-radius: 50%;
            text-align: center;
        }
        .num{
            padding: 10rpx;
        }
    }
    }
    }
}
.flooer{
    display: flex;
    justify-content: space-between;
    text-align: center;
    margin-top: 83rpx;
    border-top: 1px solid rgba(204, 204, 204, 0.514);
    background-color: #fdfdfd;
    position: fixed;
    padding: 0 10rpx;
    width: 100%;
    height: 83rpx;
    line-height: 83rpx;
    bottom: 0;
    left: 0;
    .left{
        
    }
    .center{
        flex: 1;
        text{
            color: $themeColor;
            font-size: 30rpx;
        }
    }
}
</style>